.rank-badge {
  .rank-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    
    &.rank-1 {
      background: #ffd700;
      color: #fff;
    }
    
    &.rank-2 {
      background: #c0c0c0;
      color: #fff;
    }
    
    &.rank-3 {
      background: #cd7f32;
      color: #fff;
    }
    
    &:not(.rank-1):not(.rank-2):not(.rank-3) {
      background: #f5f5f5;
      color: #595959;
    }
  }
}
